<script setup lang="ts">
import {
  NConfigProvider,
  NGlobalStyle,
  NLoadingBarProvider,
  NMessageProvider,
  NNotificationProvider,
  zhCN,
  dateZhCN,
} from "naive-ui";
import ThemeStyle from "./ThemeStyle.vue";
import { useThemOverrides } from "./ThemeOverrides";

const themeOverrides = useThemOverrides();
</script>

<template>
  <NConfigProvider
    :locale="zhCN"
    :date-locale="dateZhCN"
    :theme-overrides="themeOverrides"
  >
    <NLoadingBarProvider>
      <NMessageProvider>
        <NNotificationProvider>
          <ThemeStyle />

          <router-view v-slot="{ Component }">
            <transition
              name="custom-classes-transition"
              style="--animate-duration: 200ms"
              enter-active-class="animate__animated animate__fadeIn"
              leave-active-class="animate__animated animate__fadeOut"
              mode="out-in"
            >
              <component :is="Component" />
            </transition>
          </router-view>
          <NGlobalStyle />
        </NNotificationProvider>
      </NMessageProvider>
    </NLoadingBarProvider>
  </NConfigProvider>
</template>

<style></style>
